<!--
 * @Date         : 2023-11-06 21:37:46
 * @LastEditTime : 2023-11-18 22:37:25
 * @description  : searchPage
-->
<template>
  <view class="searchPage">
    <scroll-view class="scrollview" :scroll-y="true" @scroll="onscroll">
      <cl-header
        :title="detail.name"
        :isOccupy="false"
        :scrollTop="scrollTop"
        :transparent="true"
        :isBack="true"
      ></cl-header>
      <u-swiper
        :list="detail.file_url"
        height="200"
        :indicator="true"
      ></u-swiper>
      <div class="onlineDetail">
        <div class="main-content">
          <div class="name">
            {{ detail.title }}
          </div>
          <div class="tag">
            <text class="tag-n">{{ detail.create_time }}</text>
            <text class="zcr">作者：{{ detail.author }}</text>
            <!-- <text class="hz">{{ detail.create_time }}</text> -->
          </div>
          <div class="content">
            <u-read-more showHeight="200">
              <!-- <rich-text :nodes="content"></rich-text> -->
              <div class="desc">{{ detail.content }}</div>
            </u-read-more>
          </div>
          <!-- <div class="label">作品成果</div>
          <div class="row displayFlex">
            <div class="row-item" v-for="(item, index) in list1" :key="index">
              <u--image
                :showLoading="true"
                :src="item"
                width="120px"
                radius="10"
                height="80px"
              ></u--image>
            </div>
          </div> -->
          <!-- <div class="label"></div>
          <div class="row"></div> -->
        </div>
        <!-- <hb-comment
          ref="hbComment"
          @add="add"
          @del="del"
          @like="like"
          @focusOn="focusOn"
          :deleteTip="'确认删除？'"
          :cmData="commentData"
          v-if="commentData"
        ></hb-comment> -->
      </div>
    </scroll-view>
  </view>
</template>

<script>
import { course_work_details } from "@/apis/modules/user";
import hbComment from "@/components/hb-comment_1.2.2/components/hb-comment/hb-comment.vue";
import { parseTime } from "@/utils/index.js";
export default {
  name: "onlineDetail",
  components: { hbComment },
  data() {
    return {
      content: `            “艺术来源于生活”,
            实际上，艺术也是高于生活的，也就是说，舞蹈艺术反映生活。但是艺术与生活仍然存在着一定的差别。舞蹈是通过外在的表现形式来深层次理解创作者的创作理念，诸如，舞蹈动作、舞蹈表情、舞蹈音乐等。舞蹈创作者在舞蹈欣赏过程中，可以总结和概括舞蹈的形式、内容，实现舞蹈作品的独特性与新颖性。
            “艺术来源于生活”,
            实际上，艺术也是高于生活的，也就是说，舞蹈艺术反映生活。但是艺术与生活仍然存在着一定的差别。舞蹈是通过外在的表现形式来深层次理解创作者的创作理念，诸如，舞蹈动作、舞蹈表情、舞蹈音乐等。舞蹈创作者在舞蹈欣赏过程中，可以总结和概括舞蹈的形式、内容，实现舞蹈作品的独特性与新颖性。
            “艺术来源于生活”,
            实际上，艺术也是高于生活的，也就是说，舞蹈艺术反映生活。但是艺术与生活仍然存在着一定的差别。舞蹈是通过外在的表现形式来深层次理解创作者的创作理念，诸如，舞蹈动作、舞蹈表情、舞蹈音乐等。舞蹈创作者在舞蹈欣赏过程中，可以总结和概括舞蹈的形式、内容，实现舞蹈作品的独特性与新颖性。
         `,
      commentData: "",
      scrollTop: 0,
      searchValue: "",
      detail: "",
      list1: [
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
      ],
    };
  },
  onLaunch() {},
  onShow() {
    console.log();
  },
  onLoad() {
    this.getDourseDetails();
    this.getComment();
  },
  methods: {
    onscroll(data) {
      this.scrollTop = data.detail.scrollTop;
    },
    add(data) {
      console.log(data, "add");
    },
    del(data) {
      console.log(data, "del");
    },
    like(data) {
      console.log(data, "like");
    },
    focusOn(data) {
      console.log(data, "focusOn");
    },
    getComment() {
      let res = {
        readNumer: 193,
        commentList: [
          {
            id: 1, // 唯一主键
            owner: true, // 是否是拥有者，为 true 则可以删除，管理员全部为true
            hasLike: false, // 是否点赞
            likeNum: 2, // 点赞数量
            avatarUrl: "https://inews.gtimg.com/newsapp_ls/0/13797755537/0", // 评论者头像地址
            nickName: "超长昵称超长...", // 评论者昵称，昵称过长请在后端截断
            content: "啦啦啦啦", // 评论内容
            parentId: null, // 所属评论的唯一主键
            createTime: "2021-07-02 16:32:07", // 创建时间
          },
          {
            id: 2,
            owner: false,
            hasLike: false,
            likeNum: 2,
            avatarUrl: "https://inews.gtimg.com/newsapp_ls/0/13797761970/0",
            nickName: "寂寞无敌",
            content: "我是评论的评论",
            parentId: 1,
            createTime: "2021-07-02 17:05:50",
          },
          {
            id: 4,
            owner: true,
            hasLike: true,
            likeNum: 1,
            avatarUrl: "https://inews.gtimg.com/newsapp_ls/0/13797763270/0",
            nickName: "name111",
            content: "评论啦啦啦啦啦啦啦啦啦啦",
            parentId: null,
            createTime: "2021-07-13 09:37:50",
          },
          {
            id: 5,
            owner: false,
            hasLike: false,
            likeNum: 0,
            avatarUrl: "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
            nickName: "超长昵称超长...",
            content:
              "超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论",
            parentId: null,
            createTime: "2021-07-13 16:04:35",
          },
          {
            id: 13,
            owner: false,
            hasLike: false,
            likeNum: 0,
            avatarUrl: "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
            nickName: "超长昵称超长...",
            content: "@寂寞无敌 你怕不是个大聪明",
            parentId: 1,
            createTime: "2021-07-14 11:01:23",
          },
        ],
      };
      this.commentData = {
        readNumer: res.readNumer,
        commentSize: res.commentList.length,
        comment: this.getTree(res.commentList),
      };
    },
    getTree(data) {
      let result = [];
      let map = {};
      data.forEach((item) => {
        map[item.id] = item;
      });
      data.forEach((item) => {
        let parent = map[item.parentId];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    getDourseDetails() {
      let { id } = this.$Route.query;
      course_work_details({ id }).then((res) => {
        res["create_time"] = parseTime(res["create_time"], "{y}年{m}月{d}日");
        this.detail = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchPage {
  height: 100vh;
  background: #eeeeee;
  .scrollview {
    height: 100%;
    overflow: hidden;
  }
  .onlineDetail {
    background: #eeeeee;
    padding: 30rpx;
    .main-content {
      background: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      .name {
        text-align: center;
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        .name-tag {
          margin-left: 20rpx;
          font-size: 18rpx;
          font-weight: 400;
          color: #999999;
        }
      }
      .tag {
        text-align: center;
        font-size: 18rpx;
        font-weight: bold;
        color: #999999;
        margin: 20rpx 0;
        .tag-n {
          padding: 4rpx 20rpx;
          height: 31rpx;
          background: #eeeeee;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          opacity: 1;
        }
        .zcr {
          font-size: 20rpx;
          font-weight: bold;
          color: #999999;
          margin: 20rpx;
        }
        .hz {
          height: 27rpx;
          padding: 4rpx 20rpx;
          background: #ee4d02;
          border-radius: 30rpx 30rpx 30rpx 30rpx;
          width: 62rpx;
          font-weight: 400;
          color: #ffffff;
          line-height: 27rpx;
        }
      }
      .content {
        margin-top: 20rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #666666;
        .desc {
          font-size: 24rpx;
          font-weight: bold;
          color: rgba(102, 102, 102, 0.77);
          line-height: 50rpx;
        }
      }
      .label {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        margin-top: 40rpx;
      }
      .row {
        margin-top: 20rpx;
        min-height: 88rpx;
        overflow: auto;
      }
      .row-item {
        flex-shrink: 0;
        margin-right: 20rpx;
      }
    }
  }
}
.displayFlex {
  display: flex;
}
</style>
